<template>
    <div class="container">
        <div style="padding: 6px; color: #6b7280;">
            <!-- <h2 class="text-xl font-medium mb-6">就诊预约</h2> -->
            <el-row :gutter="20" style="margin-bottom: 20px;">
                <el-col :span="12">
                    <h3 class="text-lg font-medium mb-4">选择科室</h3>
                    <div class="div-grid">
                        <div v-for="dept in departments" class="div-doctor">
                            <el-icon class="mb-2 text-blue-500">
                                <Location />
                            </el-icon>
                            <div class="text-sm">{{ dept.name }}</div>
                        </div>
                    </div>

                </el-col>

                <el-col :span="12">
                    <h3 class="text-lg font-medium mb-4">医生排班</h3>
                    <div class="space-y-4">
                        <div v-for="doctor in doctors" :key="doctor.id" class="div-doctor">
                            <el-row>
                                <el-col :span="3">
                                    <el-avatar :src="doctor.avatar" :size="50" />
                                </el-col>
                                <el-col :span="12">
                                    <div class="font-medium">{{ doctor.name }}</div>
                                    <div class="text-sm text-gray-500">{{ doctor.title }}</div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>

            </el-row>

            <el-row style="margin-bottom: 20px;" :gutter="20">
                <el-col :span="12">
                    <h3 class="text-lg font-medium mb-4">选择日期</h3>
                    <el-calendar v-model="selectedDate" />
                </el-col>
                <el-col :span="12">
                    <h3 class="text-lg font-medium mb-4">可预约时间段</h3>
                    <el-radio-group v-model="selectedTime" class="div-radio">
                        <el-button type="text" v-for="time in timeSlots" :key="time.id" :disabled="time.disabled"
                            class="item2">
                            {{ time.slot }}
                        </el-button>
                    </el-radio-group>
                </el-col>
            </el-row>
            <div class="div-btn">
                <el-button type="primary">确认预约</el-button>
            </div>
        </div>

    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const selectedDept = ref(1);
const selectedDate = ref(new Date());
const selectedTime = ref();
// 预约相关数据
const departments = [
    { id: 1, name: '产科门诊' },
    { id: 2, name: '产科急诊' },
    { id: 3, name: '高危产科' },
    { id: 4, name: '产科超声' }
];

const timeSlots = [
    { id: 1, slot: "8:00-8:30", disabled: true },
    { id: 2, slot: "8:30-9:00", disabled: true },
    { id: 3, slot: "9:00-9:30", disabled: false },
    { id: 4, slot: "9:30-10:00", disabled: false },
    { id: 5, slot: "10:00-10:30", disabled: false },
    { id: 6, slot: "10:30-11:00", disabled: false },
    { id: 7, slot: "13:30-14:00", disabled: false },
    { id: 8, slot: "14:30-15:00", disabled: false },
    { id: 9, slot: "15:30-16:00", disabled: false },
];

const doctors = [
    {
        id: 1,
        name: '张医生',
        title: '主任医师',
        avatar: 'https://ai-public.mastergo.com/ai/img_res/3211affb67fb3611e9e992466b2e0e1d.jpg'
    },
    {
        id: 2,
        name: '李医生',
        title: '副主任医师',
        avatar: 'https://ai-public.mastergo.com/ai/img_res/962bfa5b38c0456a2715c7dbe9388033.jpg'
    }
];
</script>

<style lang="less" scoped>
.text-xl {
    text-align: left;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.font-medium {
    font-weight: medium;
}

.mb-6 {
    margin-top: 1.5rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.div-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.text-blue-500 {
    color: blue;
    font-weight: 500;
}

.div-doctor {
    //p-4 border rounded-lg
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.text-gray-500 {
    color: gray;
    font-weight: 500;
}

.div-time {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.item {
    flex: 1 0 25%;
    /* Each item takes up 1/3 of the container width */
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #ccc;
    // margin-right:1px ;
    text-align: center;
}

.div-radio {
    // grid grid-cols-4 gap-4 1rem相对于根元素字体大小
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.item2 {
    // border:  1px solid rgb(229,231,235); 
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px 6px;
    /* Optional: Adds padding inside the divs */
    font-size: 1rem;
}

.div-btn {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}
</style>
